<template>
    <div class="details-popup">
        <popup ref="popupRef" title="详情" :async="true" width="1300px" :footershow="false">
            <div class="title-box">
                <el-select v-if="flag !== '项目名称'" clearable v-model="projectId" placeholder="请选择项目名称"
                    @change="handleProjectChange">
                    <el-option v-for="item in requestUnitProjectList" :key="item.id" :label="item.title" :value="item.id" />
                </el-select>
                <div class="title-box-right" v-if="flag !== '项目名称'">
                    <span>{{ detail.title }}</span>
                    <span>{{ detail.cate_text }}</span>
                </div>
            </div>
            <el-divider content-position="left">详细资料</el-divider>
            <template v-if="flag === '项目名称'">
                <el-row class="row-mb">
                    <el-col :span="4">负责人</el-col>
                    <el-col :span="4">计划开工时间</el-col>
                    <el-col :span="4">计划竣工时间</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">{{ detail.name }}</el-col>
                    <el-col :span="4">{{ detail.create_time }}</el-col>
                    <el-col :span="4">{{ detail.end_time }}</el-col>
                </el-row>
            </template>
            <template v-else>
                <el-row class="row-mb">
                    <el-col :span="4">负责人</el-col>
                    <el-col :span="4">联系方式</el-col>
                    <el-col :span="4">备注</el-col>
                    <el-col :span="4">创建时间</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">{{ detail.leader }}</el-col>
                    <el-col :span="4">{{ detail.leader_tel }}</el-col>
                    <el-col :span="4">{{ detail.remark }}</el-col>
                    <el-col :span="4">{{ detail.create_time }}</el-col>
                </el-row>
            </template>

            <el-divider content-position="left">资金详情</el-divider>
            <el-row class="row-mb">
                <!-- <el-col :span="4">项目合同金额</el-col> -->
                <el-col :span="4">累计完成产值</el-col>
                <el-col :span="4">累计请款金额</el-col>
                <el-col :span="4">累计付款金额</el-col>
            </el-row>
            <el-row>
                <!-- <el-col :span="4">10000.00元</el-col> -->
                <el-col :span="4">{{ detail.total_nodeoutput_value }}元</el-col>
                <el-col :span="4">{{ detail.order_payment_amount }}元</el-col>
                <el-col :span="4">{{ detail.order_payment_amount }}元</el-col>
            </el-row>
            <el-divider content-position="left">请款单详情</el-divider>

            <mtable selection :data="paymentList" :type="typeTable" :list="list" :bill="true" :tableheight="500">
                <template #tool="{ item }">
                    <el-table-column sortable v-if="item.display == 1" :label="item.name" show-overflow-tooltip
                        :prop="item.value" :width="item.width">
                        <template #default="{ row }">
                            <!-- 业务类型 -->
                            <div v-if="item.name == '业务类型'">
                                {{ showName(flowList, row.flow_id) }}
                            </div>
                            <div v-if="item.name == '审核状态'">
                                <el-button v-if="row.order_status == '1'" size="small" color="#E7A23D" plain>
                                    待审核
                                </el-button>
                                <el-button v-else-if="row.order_status == '2'" size="small" color="#68C33D" plain>
                                    已审核
                                </el-button>
                                <!-- 空字符串处理 -->
                                <el-button v-else-if="row.order_status == '10'" size="small" color="#c8cacc" plain>
                                    已作废
                                </el-button>
                            </div>
                            <div v-else-if="item.name == '付款状态'">
                                <el-button v-if="row.payment_status == '1'" size="small" color="#67C23A" plain>
                                        已付款
                                    </el-button>
                                    <el-button v-else-if="row.payment_status == '2'" size="small" color="#ff557f" plain>
                                        待付款
                                    </el-button>
                                    <el-button v-else-if="row.payment_status == '3'" size="small" color="#66BAEE" plain>
                                        部分支付
                                    </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #operation="{ row, val }">
                    <el-button type="primary" link @click="handleView(val)">查看</el-button>
                </template>
            </mtable>
            <el-card class="mt-2" shadow="never">
                <div class="flex">
                    <h1>合计</h1>
                    <div class="flex-1" style="text-align: right">
                        <span class="mr-10">总产值: (元)</span>
                        <span class="mr-10">总应付金额: (元)</span>
                        <span class="mr-10">总奖罚金额: (元)</span>
                        <span class="mr-10">总预支款金额: (元)</span>
                        <span class="mr-10">总累计实付金额: (元)</span>
                        <span class="mr-10">总未付金额: (元)</span>
                        <span class="mr-10">总人工费: (元)</span>
                        <span class="mr-10">总材料费: (元)</span>
                    </div>
                </div>
            </el-card>
        </popup>
    </div>
</template>

<script setup lang="ts">
import { showName } from "@/utils/util";
import Popup from "@/components/popup/index.vue";
import mtable from "@/components/table/index.vue";
// 组件实例
const popupRef = shallowRef<InstanceType<typeof Popup>>();
import { getCommonFieldDisplay } from "@/api/tools/code";
import { getList } from "@/api/financial/system";
import { adminDetail as projectDetail } from "@/api/financial/message";
import {
    requestingUnitDetail,
    projectUnitList,
    getFinancialLists,
} from "@/api/financial/lists";
// 打开弹窗
const open = async () => {
    await getOptions();
    popupRef.value?.open();
};
const data = ref([]);
const list = ref([]);
const getOptions = async () => {
    const res = await getCommonFieldDisplay({
        type: typeTable.value,
    });
    list.value = res;
};
// 控制展示项目名称还是请款单位的数据的标志
const flag = ref("");

// 控制展示项目名称还是请款单位的数据
const detail = ref({});
const projectId = ref<string | undefined>("");

// 获取详细资料的函数
const businessId = ref();
const requestUnitProjectList = ref([]);
const getAdminListss = async (
    value: string,
    id: string,
    project_id?: string
) => {
    if (value === "项目名称") {
        const resp = await projectDetail({ id });
        detail.value = {
            name: resp.leader_text.map(item => item.name).join(","),
            create_time: resp.create_time,
            end_time: resp.end_time,
            total_nodeoutput_value: resp.total_nodeoutput_value,
            order_payment_amount: resp.order_payment_amount,
            total_payment_request: resp.total_payment_request,
        };
    } else {
        projectId.value = project_id;
        detail.value = await requestingUnitDetail({ id });
        requestUnitProjectList.value = await projectUnitList({ unit_id: id });
    }
    businessId.value = id;
    const res = await getFinancialLists({ page_no: 1, page_size: 100 });
    data.value = res.lists;
    flag.value = value;
};

const paymentList = computed(() => {
    if (flag.value == "请款单位") {
        return projectId.value
            ? data.value.filter(item => item.project_id == projectId.value)
            : data.value;
    }
    return data.value.filter(item => item.project_id == businessId.value);
});

const handleProjectChange = async projectId => {
    if (projectId) {
        const project = requestUnitProjectList.value.find(
            item => item.id == projectId
        );
        detail.value.leader = project?.leader_text?.[0].name;
        detail.value.leader_tel = project?.leader_text?.[0].tel;
        detail.value.remark = project?.remark;
        detail.value.create_time = project?.create_time;
        detail.value.total_nodeoutput_value = project?.total_nodeoutput_value;
        detail.value.total_payment_request = project?.total_payment_request;
        detail.value.order_payment_amount = project?.order_payment_amount;
    } else {
        detail.value = await requestingUnitDetail({
            id: businessId.value,
        });
    }
};

const typeTable = ref("project_request_status");

const flowList = ref<List[]>([]);
const fetchFlowList = async () => {
    const data = await getList({ page_no: 1, page_size: 100 });
    flowList.value = data.lists;
};
onMounted(async () => {
    fetchFlowList();
});

// 方法抛出
defineExpose({
    open,
    getAdminListss,
});
</script>

<style lang="scss" scoped>
.title-box {
    display: flex;
    align-items: center;

    .title-box-right {
        margin-left: 80px;

        :first-child {
            font-size: 16px;
            margin-right: 20px;
        }
    }
}

.row-mb {
    margin-bottom: 10px;
    color: #000;
    font-weight: 500;
}
</style>
